<template>
  <div class="settings-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <span>个人设置</span>
          </template>
          
          <el-tabs v-model="activeTab" class="settings-tabs">
            <el-tab-pane label="基本信息" name="basic">
              <el-form :model="basicForm" :rules="basicRules" ref="basicFormRef" label-width="100px">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="basicForm.name" />
                </el-form-item>
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="basicForm.studentId" disabled />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="basicForm.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="basicForm.phone" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="basicForm.email" />
                </el-form-item>
                <el-form-item label="家庭住址" prop="address">
                  <el-input v-model="basicForm.address" type="textarea" :rows="3" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateBasicInfo">保存</el-button>
                  <el-button @click="resetBasicForm">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="密码修改" name="password">
              <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="passwordForm.oldPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="passwordForm.newPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                  <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updatePassword">修改密码</el-button>
                  <el-button @click="resetPasswordForm">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="通知设置" name="notification">
              <el-form :model="notificationForm" label-width="150px">
                <el-form-item label="邮件通知">
                  <el-switch v-model="notificationForm.email" />
                </el-form-item>
                <el-form-item label="短信通知">
                  <el-switch v-model="notificationForm.sms" />
                </el-form-item>
                <el-form-item label="请假申请通知">
                  <el-switch v-model="notificationForm.leave" />
                </el-form-item>
                <el-form-item label="奖学金通知">
                  <el-switch v-model="notificationForm.scholarship" />
                </el-form-item>
                <el-form-item label="选课通知">
                  <el-switch v-model="notificationForm.course" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateNotification">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>系统信息</span>
          </template>
          
          <div class="system-info">
            <div class="info-item">
              <span class="label">系统版本：</span>
              <span class="value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="label">最后登录：</span>
              <span class="value">2024-01-15 09:30</span>
            </div>
            <div class="info-item">
              <span class="label">登录次数：</span>
              <span class="value">156次</span>
            </div>
            <div class="info-item">
              <span class="label">在线时长：</span>
              <span class="value">2小时30分钟</span>
            </div>
          </div>
          
          <el-divider />
          
          <div class="quick-actions">
            <h4>快捷操作</h4>
            <el-button type="primary" @click="exportData" style="width: 100%; margin-bottom: 10px;">
              导出个人数据
            </el-button>
            <el-button type="warning" @click="clearCache" style="width: 100%; margin-bottom: 10px;">
              清除缓存
            </el-button>
            <el-button type="danger" @click="logout" style="width: 100%;">
              退出登录
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

const activeTab = ref('basic')

const basicFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

const basicForm = reactive({
  name: '张三',
  studentId: '2024001',
  gender: '男',
  phone: '13800138000',
  email: 'zhangsan@example.com',
  address: '北京市朝阳区xxx街道xxx号'
})

const basicRules: FormRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const notificationForm = reactive({
  email: true,
  sms: false,
  leave: true,
  scholarship: true,
  course: true
})

const updateBasicInfo = async () => {
  if (!basicFormRef.value) return
  
  await basicFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('基本信息更新成功')
    }
  })
}

const resetBasicForm = () => {
  if (!basicFormRef.value) return
  basicFormRef.value.resetFields()
}

const updatePassword = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('密码修改成功')
    //   passwordFormRef.value.resetFields()
    }
  })
}

const resetPasswordForm = () => {
  if (!passwordFormRef.value) return
  passwordFormRef.value.resetFields()
}

const updateNotification = () => {
  ElMessage.success('通知设置更新成功')
}

const exportData = () => {
  ElMessage.info('数据导出功能开发中...')
}

const clearCache = () => {
  ElMessage.success('缓存清除成功')
}

const logout = () => {
  ElMessage.info('退出登录功能开发中...')
}
</script>

<style scoped>
.settings-container {
  padding: 0;
}

.settings-tabs {
  margin-top: 20px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  color: #606266;
  font-weight: 500;
}

.value {
  color: #303133;
}

.quick-actions h4 {
  margin: 0 0 15px 0;
  color: #303133;
}
</style>
